<template>
	<b-layout-index>
		<navbar :title="$t('付款')"></navbar>
		<view class="  br-rd-6   pd-bottom-50">
			<u-cell :border="false" icon="setting-fill">
				<u-avatar slot="icon" :src="authInfo.avatar"></u-avatar>
				<view slot="title" class="pd-left-5 pd-right-5">
					<text>{{authInfo.name?authInfo.name:authInfo.nickname}}</text>
				</view>
			</u-cell>
			<view class="gridlatebg">
				<view class="pd-20  ">
					<text> {{$t('付款金额')}}</text>
				</view>
				<view class="pd-20 text-center  ">
					<view class="input br-rd-6">
						<u-cell :border="false">
							<u--input type="number" fontSize="18" v-model="price" slot="title" suffixIcon="rmb" class="pd-left-10 pd-right-10 font-bold font-size-24"
								:placeholder="$t('请输入付款金额')" border="none" :suffixIconStyle="{fontSize:'24px'}"></u--input>
						</u-cell>
					</view>

				</view>
				<view class="pd-20  ">

					<u-button @click="paymentGo" :color="color.primary" type="primary" :text="$t('付款')"></u-button>
				</view>
			</view>
		</view>
		<u-modal :show="showInfo" @confirm="confirmOkDialog" @cancel="cancelDialg" :showCancelButton="true"
			:title="$t('你确定要转账吗')"></u-modal>

	</b-layout-index>
</template>

<script>
	import {
		getAuthByInfo
	} from '@/api/user.js'
	import {
		findByMyPaymentTransfer
	} from '@/api/userWallet.js'
	export default {
		data() {
			var authInfo1 = uni.getStorageSync("authInfo") || {
				userId: 0
			}
			return {
				userInfo: authInfo1,
				authInfo: {},
				price: null,
				showInfo: false
			}
		},
		onLoad: function({
			type = 12,
			userId = 0
		}) {
			var uid = this.userInfo.userId;
			if (uid != userId) {
				if (userId > 0) {
					uni.setStorageSync("parentUserId", userId)
					this.getAuthInfo(userId)
				} else {
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
			} else {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		},
		methods: {
			getAuthInfo: function(userId = 0) {
				var the = this;
				getAuthByInfo(userId).then(res => {
					the.authInfo = res;
				})
			},
			paymentGo: function() {
				console.log(this.price)
				var the = this;
				if (the.price > 0) {
					the.showInfo = true;
				}

				/*
					uni.checkIsSupportSoterAuthentication({
						success(res) {
							var supportMode = res.supportMode;
							if (supportMode.length) {
								var key = supportMode[0]
								the.authPass(key)
							}
							console.log(res, supportMode);
						},
						fail(err) {
									the.showInfo = true;
							console.log(err);
						},
						complete(res) {
							console.log(res);
						}
					})
					*/
			},
			authPass: function(key) {
				uni.startSoterAuthentication({
					requestAuthModes: [key],
					challenge: '123456',
					authContent: '请用FaceID解锁',
					success(res) {
						console.log(res);
						this.sendPay()
					},
					fail(err) {
						console.log(err);
					},
					complete(res) {
						console.log(res);
					}
				})
			},
			cancelDialg: function() {
				this.showInfo = false;
			},
			confirmOkDialog: function() {
				this.showInfo = false;
				this.sendPay()
			},
			sendPay: function() {
				var authinfo = this.authInfo;
				var price = this.price;
				var param = {
					name: authinfo.name,
					userId: authinfo.id,
					price: price
				}
				findByMyPaymentTransfer(param).then(res => {
					uni.showModal({
						title: "转账成功",
						success: function() {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}
					})

				})

			}

		}
	}
</script>

<style>
	.input {
		/* background-color: #3c9cff0f; */
		direction: ltr;
	}

	.gridlatebg {
		background-image: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
		border-top-right-radius: 30px;
		border-top-left-radius: 30px;
	}

	.brinfo {
		border-top-right-radius: 30px;
		border-top-left-radius: 30px;
	}
</style>